<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript DOM</title>
</head>
<body>
    <div id="box1">
        这是一个ID选择器标签
    </div>
    <div class="box2">
        这是一个类选择器标签
    </div>
    <div>普通的div标签</div>

    <button>点击按钮</button>

    <script>
        var element = document.getElementById("box1");
        console.log(element);

        var elementarr = document.getElementsByClassName("box2");
        console.log(elementarr);

        var elementtag = document.getElementsByTagName('div')[2];
        console.log(elementtag);

        //其他用法同理


        element.innerHTML = "修改ID选择器标签文本内容";
        elementarr.innerText = "修改后的类选择文本";
        elementtag.style.color = "red";
        elementtag.style.fontSize = '20px';

        //Dom属性绑定事件
        var button_element = document.getElementsByTagName('button')[0];
        console.log(button_element);

        // button_element.onclick = function()
        // {
        //     alert("Dom属性按键触发")
        // }

        button_element.addEventListener('click', function()
    {
        alert('通过addEventListener触发');
    })
    </script>
</body>
</html>